/**
 * 例子主页
 */

import React, {Component} from 'react';
import {StyleSheet, FlatList, Button, Text, View, TouchableHighlight} from 'react-native';

import DemoBottomTab from "./DemoBottomTab";
import DemoZhiHu from "./DemoZhiHu";

export default class DemoMain extends Component {
    list = [{title: '底部栏demo', index: 0}, {title: '知乎demo', index: 1}, {title: '音乐播放器', index: 2}
    , {title: '文件管理器', index: 3}];

    //设置顶部导航栏的内容
    static navigationOptions = ({navigation, screenProps}) => ({
        //左侧标题
        headerTitle: '主页面',
        //设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题
        headerBackTitle: null,
        //顶部标题栏的样式
        headerStyle: styles.headerStyle,
        //顶部标题栏文字的样式
        headerTitleStyle: styles.headerTitleStyle,
    });

    render() {
        const {navigate} = this.props.navigation;
        return (
            <FlatList
                keyExtractor={(item, index) => index.toString()}
                data={this.list}
                renderItem={({item}) =>
                    //渲染item
                    <TouchableHighlight underlayColor='#CFCFCF' onPress={() => {
                        switch (item.index) {
                            case 0:
                                navigate('DemoBottomTab');
                                break;
                            case 1:
                                navigate('DemoZhiHu');
                                break;
                            case 2:
                                navigate('DemoMusicPlayer');
                                break;
                            case 3:
                                navigate('DemoFileManager');
                            break;
                        }
                    }}>
                        <View style={styles.container}>
                            <Text style={styles.itemText}> {item.title} </Text>
                        </View>
                    </TouchableHighlight>
                }
            />
        );
    }
}

//处理点击事件
function _onClick(item) {
    if (item.index == 0) {
        //跳转到底部栏界面
        this.props.navigation.push({
            component: DemoBottomTab
        });
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        height: 52,
        justifyContent: 'center',
    },
    itemText: {
        fontSize: 13,
        marginLeft: 10,
    },
    button: {
        width: 240,
        height: 45,
        borderRadius: 5,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#4398ff',
    },
    headerStyle: {
        backgroundColor: '#4398ff',
    },
    headerTitleStyle: {
        //标题的文字颜色
        color: 'white',
        //设置标题的大小
        fontSize: 18,
        //居中显示
        alignSelf: 'center',
    },
});
